<template>
  <el-collapse-item name="material">
    <template slot="title">
      <PartitionTitle title="物料信息"></PartitionTitle>
    </template>

    <el-table :data="tableList" tooltip-effect="dark" style="width: 100%" border>
      <el-table-column label="序号" type="index" width="60" align="center">
        <template slot-scope="scope">
          <span>{{
            utils.tableSerialNumber(scope, pager.pageNum, pager.pageSize)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="物料编码" prop="itemNo" width="90"></el-table-column>
      <el-table-column label="物料名称" prop="itemName"></el-table-column>

      <template v-if="mode == 'update' || mode == 'history'">
        <el-table-column label="领料量">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.ptsPickingQty" size="mini" :min="0" :disabled='mode == "history" || mode == "update"' @change="changNum"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="退料量">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.ptsRefundQty" size="mini" :min="0" :disabled='mode == "history" ? true :false'  @change="changNum"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="使用量" prop="usedConsumeQty" width="100"></el-table-column>

        <el-table-column label="损耗量">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.actualWastageQty" size="mini" :min="0" :disabled='mode == "history" || mode == "update"' @change="changNum"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="本单结余量" prop="currentBalanceQty" width="100"></el-table-column>
      </template>
      <el-table-column label="单位" prop="itemUnit" width="60"></el-table-column>
    </el-table>
  </el-collapse-item>
</template>
<script>
  import {refershOrderQtys} from "@/api/workOrder/confirmClose";
export default {
  props:{
    mode:{
      type:String,
      default:""
    },
    orderDetail:{
      type:Object,
      default:()=>{}
    },
    materialList:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      tableList:[]
    };
  },

  methods:{
    changNum(){
      const parmas = {
        id: this.orderDetail.id,
        collectedQuantity: this.orderDetail.collectedQuantity,
        actualQuantity: this.orderDetail.actualQuantity,
        orderMaterialDtos:this.tableList
      }
      refershOrderQtys(parmas).then(res => {
        if (res.code == 200 && res.data) {
          this.msgSuccess("数据更新成功")
          this.tableList = structuredClone(res?.data?.orderMaterialDtos);
          this.tableList.forEach(ele => {
            this.$set(ele,"usedConsumeQty",this.toFix(Number(ele.theoryConsumeQty)+Number(ele.actualWastageQty), 2))
          })
        } else {
          this.msgError(res.msg || "数据更新失败")
        }
        this.loading = false
      }).catch(() => {
        this.msgError("数据更新失败")
        this.loading = false
      })
    }
  },

  watch:{
    materialList:{
      handler(list){
        if(list?.length){
          this.tableList = structuredClone(list)
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.block-title {
  margin-bottom: 0;
}
</style>
